<template>
  <div class="event1">
    <h3>我是event3组件</h3>
    <selectTab :isMutiply="false" v-model="formData.tabNumStr" :selectList="selectList" />
    <selectTab :isMutiply="true" v-model="formData.tabList" :selectList="selectList1" />
    <el-button @click="submit">提交</el-button>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, version } from "vue";
import { toRaw } from "@vue/reactivity";
import selectTab from "./select-tab/index.vue";

interface FormData {
  tabNumStr: number;
  tabList: number[];
}
const formData = reactive<FormData>({
  tabNumStr: 1,
  tabList: [1, 2]
});
const selectList = [
  {
    value: 1,
    label: "是"
  },
  {
    value: 2,
    label: "否"
  }
];
const selectList1 = [
  {
    value: 1,
    label: "羽毛球"
  },
  {
    value: 2,
    label: "篮球"
  },
  {
    value: 3,
    label: "排球"
  }
];

const submit = () => {
  console.log(formData, toRaw(formData));
};

onMounted(() => {
  console.log("当前的vue版本", version);
});
</script>

<style scoped lang="scss">
.event1 {
  height: 200px;
  width: 400px;
  background: gray;
}
</style>
